<template>
  <div class="zx-option" @click.stop="emitValue($event)" ref="option" :class="bindClass()">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: 'zx-option',
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    name: {
      type: [String, Number]
    }
  },
  data() {
    return {
    };
  },
  inject: ['select'],
  watch: {
    value() {
      console.log(this.value);
    },
    'select.currentValue'(val) {
      if (this.select.currentValue == this.value) {
        console.log(val);
        this.select.currentLabel = this.$el.innerHTML;
      }
    }
  },
  methods: {
    emitValue(event) {
      this.select.currentValue = this.value;
      this.select.currentLabel = event.target.innerText;
      this.select.showBool = false;
    },
    bindClass() {
      return this.value == this.select.currentValue ? 'active' : '';
    }
  },
  mounted() {
    if (this.select.currentValue === this.value) {
      this.select.currentLabel = this.$el.innerHTML;
    }
  }
};
</script>
<style lang="scss" scoped>
  .zx-option {
    padding: 10px;
    font-size: 14px;
    position: relative;
    &::after {
      content: "";
      display: block;
      position: absolute;
      right: 10px;
      top: 10px;
      height: 20px;
      width: 20px;
      border-radius: 20px;
      background: url('../../../assets/img/select.png') no-repeat center center;
      background-size: 100% 100%;
    }
    &.active {
      color: #019dfa;
      &::after {
        background: url('../../../assets/img/select-check.png') no-repeat center center;
        background-size: 100% 100%;
      }
    }
    &:not(:last-of-type) {
      /* border-bottom: 0.5px solid rgba(29, 144, 230, 0.4); */
    }
  }
</style>